<template>
  <div class="hot">

    <div class="hotMainBg">
     <div class="h_m_topBg">
       <div class="leftBg">

         <ul class="btn">
         	<li @click="tgBtn(t_btnIdx)" :class="{'acBtn':tb_index==t_btnIdx}" v-for="(t_btnIt,t_btnIdx) in t_btn" :key="'t_btnIt_0'+t_btnIdx">
            <h1>
              {{t_btnIt}}
            </h1>
          </li>
         </ul>

       </div>
       <div class="rightBg">
         全部8个
       </div>
     </div>
     <div class="h_m_botBg">

       <div v-show="tb_index==0" class="tgBtnBox">

         <ul>
           <li>
              <div class="t">
                <div class="le">
                  <div class="tu">
                    <img class="lg" src="@/assets/img/hot/lg.png" >
                  </div>
                  <span>
                    自定义榜
                  </span>
                </div>
                <div class="ri">
                  热度
                </div>
              </div>
              <div class="m">
                <div class="setBox">
                  <div class="tu">
                    <img src="@/assets/img/hot/00.png" >
                    <span>
                      请先设置榜单
                    </span>
                  </div>
                  <div class="btn">
                    开始设置
                  </div>
                </div>
              </div>
              <div class="b">
                <span style="opacity: 0;">
                  2小时前
                </span>
                <div class="ri">
                  <img src="@/assets/img/hot/set.png" >
                  <span>
                    设置
                  </span>
                </div>
              </div>
            </li>

         	<li v-for="(LiIt,LiIdx) in 12" :key="'LiIt_0'+LiIdx">
             <div class="t">
               <div class="le">
                 <div class="tu">
                   <img src="@/assets/img/home/box_04/wx_green.png" >
                 </div>
                 <span>
                   成都 ‧ 24h热文榜
                 </span>
               </div>
               <div class="ri">
                 热度
               </div>
             </div>
             <div class="m">
                 <dl>
                   <dt>
                     <div class="num">
                       1
                     </div>
                     <div class="txt">
                      今天是世界献血者日
                     </div>
                   </dt>
                   <dd>
                     <div class="data">
                       2000.0万
                     </div>
                     <div class="line"></div>
                   </dd>
                 </dl>
                 <dl>
                   <dt>
                     <div class="num">
                       1
                     </div>
                     <div class="txt">
                      今天是世界献血者日
                     </div>
                   </dt>
                   <dd>
                     <div class="data">
                       2000.0万
                     </div>
                     <div class="line"></div>
                   </dd>
                 </dl>
                 <dl>
                   <dt>
                     <div class="num">
                       1
                     </div>
                     <div class="txt">
                      今天是世界献血者日
                     </div>
                   </dt>
                   <dd>
                     <div class="data">
                       2000.0万
                     </div>
                     <div class="line"></div>
                   </dd>
                 </dl>
                 <dl>
                   <dt>
                     <div class="num">
                       1
                     </div>
                     <div class="txt">
                      今天是世界献血者日
                     </div>
                   </dt>
                   <dd>
                     <div class="data">
                       2000.0万
                     </div>
                     <div class="line"></div>
                   </dd>
                 </dl>
                 <dl>
                   <dt>
                     <div class="num">
                       1
                     </div>
                     <div class="txt">
                      今天是世界献血者日
                     </div>
                   </dt>
                   <dd>
                     <div class="data">
                       2000.0万
                     </div>
                     <div class="line"></div>
                   </dd>
                 </dl>
                 <dl>
                   <dt>
                     <div class="num">
                       1
                     </div>
                     <div class="txt">
                      今天是世界献血者日
                     </div>
                   </dt>
                   <dd>
                     <div class="data">
                       2000.0万
                     </div>
                     <div class="line"></div>
                   </dd>
                 </dl>

             </div>
             <div class="b">
               <span>
                 2小时前
               </span>
               <div class="ri">
                 <img src="@/assets/img/hot/sc.png" >
                 <span>
                   已关注
                 </span>
               </div>
             </div>
           </li>

           <li class="addHot">

             <div class="addBtn">
               <span>
                 +
               </span>
               <span>
                 添加热榜
               </span>
             </div>

           </li>
         </ul>



       </div>
       <div v-show="tb_index==1" class="tgBtnBox">
        <dl class="h_b_04BoxMain">
          <dt>
            <ul>
            	<li class="hb_ac_00">
                <span>
                  百度
                </span>
              </li>
            	<li>
                <span>
                  百度
                </span>
              </li>
            	<li>
                <span>
                  百度
                </span>
              </li>
            	<li>
                <span>
                  百度
                </span>
              </li>
            </ul>
          </dt>
        </dl>
         <ul>
           <li v-for="(LiIt,LiIdx) in 11" :key="'LiIt_1'+LiIdx">
              <div class="t">
                <div class="le">
                  <div class="tu">
                    <img src="@/assets/img/home/box_04/wx_green.png" >
                  </div>
                  <span>
                    成都 ‧ 24h热文榜2
                  </span>
                </div>
              </div>
              <div class="m">
                  <dl>
                    <dt>
                      1
                    </dt>
                    <dd>
                      「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                    </dd>
                  </dl>
                  <dl>
                    <dt>
                      1
                    </dt>
                    <dd>
                      「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                    </dd>
                  </dl>
                  <dl>
                    <dt>
                      1
                    </dt>
                    <dd>
                      「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                    </dd>
                  </dl>
                  <dl>
                    <dt>
                      1
                    </dt>
                    <dd>
                      「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                    </dd>
                  </dl>
                  <dl>
                    <dt>
                      1
                    </dt>
                    <dd>
                      「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                    </dd>
                  </dl>
                  <dl>
                    <dt>
                      1
                    </dt>
                    <dd>
                      「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                    </dd>
                  </dl>
                  <dl>
                    <dt>
                      1
                    </dt>
                    <dd>
                      「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                    </dd>
                  </dl>
                  <dl>
                    <dt>
                      1
                    </dt>
                    <dd>
                      「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                    </dd>
                  </dl>
              </div>
              <div class="b">
                <span>
                  2小时前
                </span>
                <div class="ri">
                  <img src="@/assets/img/home/box_04/sc.png" >
                  <span>
                    关注
                  </span>
                </div>
              </div>
            </li>
         </ul>
       </div>

     </div>

    </div>

    <Nav></Nav>
    <Foot></Foot>
  </div>
</template>

<script>
  import Foot from "@/components/foot.vue"
  import Nav from "@/components/nav.vue";

  export default{
    name: 'Hot',
    data(){
      return{
        t_btn:[
          "我的热榜",
          "全部热榜"
        ],
        tb_index:0
      }
    },
    components: {
      Nav,
      Foot
    },
    methods:{
      tgBtn(val){
        console.log("val:",val);
        let that=this;
        that.tb_index=val;
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  @import "../assets/css/hot.less";
</style>
